import ActivityCard from '@/components/activity-card/activity-card'
import TabbarComp from '@/components/tab-bar/tab-bar'
import { List, Swiper } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import './home.less'
import useHandleScroll from '../../hooks/use-handle-scroll'

export default function Home() {
  const [activitys, setActivitys]:any = useState([])
  const [total,setTotal]=useState(0)
  const {filterParams}=useHandleScroll('activity-list',total)
  useEffect(() => {
    fetch("/admin/base/activityManage/page", {
      method: "POST",
      body: JSON.stringify(filterParams),
      headers: {
        "Content-Type": "application/json"
      }
    }).then(res => res.json()).then(res => {
      setTotal(res.data.pagination.total)
      setActivitys([...activitys, ...res.data.list])
    })
  }, [filterParams])
  return (
    <div className='home'>
      <Swiper loop>
        <Swiper.Item>
          <div className='swiper-img'>
            <img src={require('../../assets/swiper01.png')} alt="" />
          </div>
        </Swiper.Item>
        <Swiper.Item>
          <div className='swiper-img'>
            <img src={require('../../assets/swiper02.jpg')} alt="" />
          </div>
        </Swiper.Item>
        <Swiper.Item>
          <div className='swiper-img'>
            <img src={require('../../assets/swiper03.jpg')} alt="" />
          </div>
        </Swiper.Item>
      </Swiper>
      <div className='activity-box'>
        <div>热门活动</div>
        <div className='activity-list' id='activity-list'>
          <List>
            {
              activitys.map((item: any,index: React.Key | null | undefined) =>
                <List.Item key={index}>
                  <ActivityCard item={item}></ActivityCard>
                </List.Item>
              )
            }
          </List>
        </div>
      </div>
      <div className='empty'></div>
      <TabbarComp></TabbarComp>
    </div>
  )
}
